<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>上图下文布局</title>
 <style>
  .container {
   width: 1024px;
   margin: 0 auto;
   margin-bottom: 20px;
   background-color: #fff;
  }

  body {
   background-color: aliceblue;
  }
  .w-200 {
   width: 200px;
  }
  .w-300 {
   width: 300px;
  }
  .w-400 {
   width: 400px;
  }
  .tw2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-bottom: 50px;
  }
  .tw3 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   margin-bottom: 50px;
  }
  .tw4 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   margin-bottom: 50px;
  }
  .item img {
   display: block;
   margin: 0 auto;
  }
  .item p {
   display: block;
   margin: 0 auto; 
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.5;
   height: 3em;
  }
 </style>
</head>

<body>
 <div class="container">
  <!-- 单图文-用html figure 标签 -->
  <figure class="w-300">
   <img src="https://fakeimg.pl/300/" alt="">
   <figcaption>这是一个自定义图片的文字描述.这是一个自定义图片的文字描述.这是一个自定义图片的文字描述</figcaption>
  </figure>
  <!-- 一行 双图文 -->
  <section class="tw2">
   <div class="item">
    <img src="https://fakeimg.pl/400/" alt="">
    <p class="w-400">这是一行图文,图的文字描述.超过两行就会被隐藏. 如果没超过就再多写一些吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧.</p>
   </div>
   <div class="item">
    <img src="https://fakeimg.pl/400/" alt="">
    <p class="w-400">这是一行图文,图的文字描述.超过两行就会被隐藏. 如果没超过就再多写一些吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧.</p>
   </div>
  </section>
  <!-- 三图文 -->

  <section class="tw3">
   <div class="item">
    <img src="https://fakeimg.pl/300/" alt="">
    <p class="w-300">这是一行图文,图的文字描述.超过两行就会被隐藏. 如果没超过就再多写一些吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧.</p>
   </div>
   <div class="item">
    <img src="https://fakeimg.pl/300/" alt="">
    <p class="w-300">这是一行图文,图的文字描述.超过两行就会被隐藏. 如果没超过就再多写一些吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧.</p>
   </div>
   <div class="item">
    <img src="https://fakeimg.pl/300/" alt="">
    <p class="w-300">这是一行图文,图的文字描述.超过两行就会被隐藏. 如果没超过就再多写一些吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧.</p>
   </div>
  </section>
  <!-- 四图文 -->

  <section class="tw4">
   <div class="item">
    <img src="https://fakeimg.pl/200/" alt="">
    <p class="w-200">这是一行图文,图的文字描述.超过两行就会被隐藏. 如果没超过就再多写一些吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧.</p>
   </div>
   <div class="item">
    <img src="https://fakeimg.pl/200/" alt="">
    <p class="w-200">这是一行图文,图的文字描述.超过两行就会被隐藏. 如果没超过就再多写一些吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧.</p>
   </div>
   <div class="item">
    <img src="https://fakeimg.pl/200/" alt="">
    <p class="w-200">这是一行图文,图的文字描述.超过两行就会被隐藏. 如果没超过就再多写一些吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧.</p>
   </div>
   <div class="item">
    <img src="https://fakeimg.pl/200/" alt="">
    <p class="w-200">这是一行图文,图的文字描述.超过两行就会被隐藏. 如果没超过就再多写一些吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧吧.</p>
   </div>
  </section>
 </div>
</body>

</html>